import React, {Component} from "react";
import {Button, Form, Switch, Radio, DatePicker, Icon, Input, Select, Checkbox, Row, Col, message} from "antd";
const createForm = Form.create;
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const CheckboxGroup = Checkbox.Group;
const Option = Select.Option;
function noop() {
    return false;
}
class UserForm extends Component {
    state = {
        option: '',
        loading: false,
        visible: true,
    }

    userExists(rule, value, callback) {
        if (!value) {
            callback();
        } else {
            setTimeout(() => {
                if (value === 'JasonWood') {
                    callback([new Error('抱歉，该用户名已被占用。')]);
                } else {
                    callback();
                }
            }, 800);
        }
    }

    checkPass(rule, value, callback) {
        const {validateFields} = this.props.form;
        if (value) {
            validateFields(['rePasswd']);
        }
        callback();
    }

    checkPass2(rule, value, callback) {
        const {getFieldValue} = this.props.form;
        if (value && value !== getFieldValue('password')) {
            callback('两次输入密码不一致！');
        } else {
            callback();
        }
    }

    checkMobile(rule, value, callback) {
        if (value && !/^(1[3-8][0-9])\d{8}$/.test(value)) {
            callback(new Error('请输入正确的手机号码'));
        } else {
            callback();
        }
    }

    componentDidUpdate(nextProps, nextState) {
    }

    componentDidMount() {
    }

    render() {
        const {getFieldDecorator, getFieldError, isFieldValidating} = this.props.form;
        const formItemLayout = {
            labelCol: {span: 6},
            wrapperCol: {span: 18}
        };
        const option = this.props.init.option;
        this.state.data = this.props.init.data;

        let isDisabled = option == "view" ? true : false;

        return (
            <div >
                <Form horizontal>
                    <FormItem
                        label="登录名称："
                        labelCol={{span: 7}}
                        wrapperCol={{span: 12}}
                        hasFeedback
                        help={isFieldValidating('username') ? '校验中...' : (getFieldError('username') || []).join(', ')}>
                        {
                          getFieldDecorator('username', {
                                   initialValue: this.state.data.username,
                                   rules: [
                                       {required: true, min: 4, message: '用户名至少为 5 个字符'},
                                       {validator: this.userExists},
                                   ]
                         })(<Input placeholder="请输入用户名称用于登录本系统" disabled={(isDisabled || option == "update" )} />)
                       }
                    </FormItem>
                    <FormItem
                        label="邮箱："
                        labelCol={{span: 7}}
                        wrapperCol={{span: 12}}
                        hasFeedback>

                         {
                          getFieldDecorator('email', {
                                   initialValue: this.state.data.email,
                                   validate: [{
                                       rules: [
                                           {required: true, message: '请输入正确的邮箱地址'},
                                       ],
                                       trigger: 'onBlur',
                                   }, {
                                       rules: [
                                           {type: 'email', message: '请输入正确的邮箱地址'},
                                       ],
                                       trigger: ['onBlur', 'onChange'],
                                   }]
                               })(<Input type="email" placeholder="请输入邮箱地址" disabled={isDisabled}/>)
                       }
                    </FormItem>
                    <FormItem
                        label="密码："
                        labelCol={{span: 7}}
                        wrapperCol={{span: 12}}
                        hasFeedback>
                        {
                          getFieldDecorator('password', {
                                   initialValue: this.state.data.password,
                                   rules: [
                                       {required: true, whitespace: true, message: '请填写密码'},
                                       {validator: this.checkPass.bind(this)},
                                   ],
                               })(<Input type="password" autoComplete="off" disabled={(isDisabled || option == "update" )} onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}/>)
                        }
                        
                    </FormItem>
                    <FormItem
                        label="确认密码："
                        labelCol={{span: 7}}
                        wrapperCol={{span: 12}}
                        hasFeedback>
                        {
                            getFieldDecorator('rePasswd', {
                                   initialValue: this.state.data.password,
                                   rules: [{
                                       required: true,
                                       whitespace: true,
                                       message: '请再次输入密码',
                                   }, {
                                       validator: this.checkPass2.bind(this),
                                   }],
                               })(
                                  <Input type="password" autoComplete="off" placeholder="两次输入密码保持一致"
                               disabled={(isDisabled || option == "update" )}
                               onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop} />
                               )
                        }
                    </FormItem>
                    <FormItem
                        label="性别："
                        labelCol={{span: 7}}
                        wrapperCol={{span: 12}}>
                        {
                          getFieldDecorator('sex',{initialValue: this.state.data.sex ? this.state.data.sex : '1'})(
                                <RadioGroup disabled={isDisabled}>
                                  <Radio value="1">男</Radio>
                                  <Radio value="2">女</Radio>
                              </RadioGroup>
                            )
                        }
                      
                    </FormItem>
                    <FormItem
                        label="是否可用："
                        labelCol={{span: 7}}
                        wrapperCol={{span: 12}}>
                        {
                          getFieldDecorator('enabled', {
                            valuePropName: 'checked',
                            initialValue: this.state.data.enabled ? this.state.data.enabled == '1' ? true : false : true
                          })(<Switch />) 
                        }
                    </FormItem>
                    <FormItem
                        label="是否管理员："
                        labelCol={{span: 7}}
                        wrapperCol={{span: 12}}>
                        {
                          getFieldDecorator('administrator',{
                            valuePropName: 'checked',
                            initialValue: this.state.data.administrator == '1' ? true : false})(
                              <Switch />
                            )
                        }
                        
                    </FormItem>
                    <FormItem
                        label="用户名称："
                        labelCol={{span: 7}}
                        wrapperCol={{span: 12}}>
                        {
                          getFieldDecorator('cname',{
                            initialValue: this.state.data.cname
                          })(<Input placeholder="请输入用户中文名称" disabled={isDisabled} />)
                        }
                        
                    </FormItem>
                    <FormItem
                        label="手机："
                        labelCol={{span: 7}}
                        wrapperCol={{span: 12}}
                        hasFeedback>
                        {
                          getFieldDecorator('mobile', {
                                   initialValue: this.state.data.mobile,
                                   rules: [{
                                       required: true,
                                       whitespace: true,
                                       min: 11,
                                       pattern: /^(1[3-8][0-9])\d{8}$/,
                                       message: '请输入正确的手机号码'
                                   }]
                               })(<Input type="mobile" placeholder="请输入手机号码" disabled={isDisabled}/>)
                        }
                        
                    </FormItem>
                    <FormItem
                        label="备注："
                        labelCol={{span: 7}}
                        wrapperCol={{span: 12}}>
                        {
                          getFieldDecorator('remark', {initialValue: this.state.data.remark})(
                              <Input type="textarea" placeholder="请输入备注信息" id="textarea" name="remark" disabled={isDisabled}/>
                            )
                        }
                        
                    </FormItem>
                    {
                      getFieldDecorator('userid', {initialValue: this.state.data.userid})(<Input type="hidden"/>)
                    }
                    
                </Form>
            </div>

        );
    }
}
;

UserForm = createForm()(UserForm);
export default UserForm
